<template>
  <view class="container">
    <view class="content">
		
      <view class="section">
        <text class="section-title">服务评价</text>
        <view class="service-evaluation">
          <image class="service-img" src="https://img1.baidu.com/it/u=2646499866,724838724&fm=253&fmt=auto&app=120&f=JPEG?w=733&h=500"></image>
          <view class="service-details">
            <text>车百事汽车生活馆</text>
            <view class="stars">
              <text>★★★★★</text>
            </view>
          </view>
        </view>
      </view>

      <view class="section">
        <text class="section-title">评语 (0-299字)</text>
        <textarea class="comment" placeholder="请留下您宝贵的意见和建议……"></textarea>
      </view>

      <view class="section">
        <text class="section-title">照片 (选填)</text>
        <view class="upload-photo">
          <button class="upload-btn">+</button>
        </view>
      </view>
      
      <button class="submit-btn">提交</button>
    </view>
  </view>
</template>

<style>
.container {
  padding: 20rpx;
}
.title {
  color: white;
  font-size: 36rpx;
}

.content {
  background-color: #f8f8f8;
  padding: 20rpx;
}

.section {
  background-color: white;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}

.section-title {
  font-size: 32rpx;
  margin-bottom: 10rpx;
  display: block;
  height: 90rpx;
  font-weight: 600;
  /* background-color: #007AFF; */
  line-height: 90rpx;
  font-size: 37rpx;
  padding-left: 10rpx;
}

.service-evaluation {
  display: flex;
  align-items: center;
}

.service-img {
  width: 160rpx;
  height: 120rpx;
  margin-right: 20rpx;
}

.service-details {
  display: flex;
  flex-direction: column;
}

.stars {
  color: #FFD700; /* 星星颜色 */
}

.comment {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 10rpx;
}

.upload-photo {
  display: flex;
  align-items: center;
  /* background-color: #007AFF; */
}

.upload-btn {
  background-color: #ddd;
  width: 150rpx;
  height: 150rpx;
  margin-left: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  border-radius: 10rpx;
  
}

.submit-btn {
  width: 80%;
  height: 80rpx;
  background-color: #007AFF;
  color: white;
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
}
</style>
